<template>
  <van-tabbar v-model="active" class="active_tab">
    <van-tabbar-item
      v-for="(item,index) in tabbars"
      :key="index"
      @click="tab(index,item.name)"
    >
      <span :class="currIndex == index ? active:''">{{item.title}}</span>
      <template slot="icon" slot-scope="props">
        <img :src="props.active ? item.active : item.normal">
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: "MyTabbar",
  data() {
    return {
      currIndex: 0,
      active: 0,
      tabbars: [
        {
          name: "Home",
          title: "首页",
          normal: require("../static/icons/tabbar/home.png"),
          active: require("../static/icons/tabbar/home-ed.png")
        },
        {
          name: "Category",
          title: "分类",
          normal: require("../static/icons/tabbar/category.png"),
          active: require("../static/icons/tabbar/category-ed.png")
        },
        {
          name: "Cart",
          title: "购物车",
          normal: require("../static/icons/tabbar/cart.png"),
          active: require("../static/icons/tabbar/cart-ed.png")
        },
        {
          name: "Mine",
          title: "我",
          normal: require("../static/icons/tabbar/mine.png"),
          active: require("../static/icons/tabbar/mine-ed.png")
        }
      ]
    };
  },
  methods: {
    tab(index, val) {
      this.currIndex = index;
      this.$router.push(val);
    }
  }
};
</script>

<style lang="scss" scoped>
// .active_tab img {
//   width: 26px;
//   height: 26px;
// }

// .van-tabbar-item--active {
//   color: #e10f02;
// }
</style>